<!-- 根据坐标自动适应缩放 -->
<template>
	<view class="content">
		<view class="wrapperBox">
			<view id="wrapper"></view>
		</view>
	</view>
</template>

<script>
	let mapObj = null; // 生成组件实例
	// 创建多个标点
	let agriculture = []; // 生成图标实例1
	let property = []; // 生成图标实例2
	let construction = []; // 生成图标实例3
	let noRented = []; // 生成图标实例4
	
	let marker = []; // 生成标点实例
	
	let bounds = []; // 生成自动缩放

	window.mapInit = function() { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			mapStyleId: 'style1', // 地图样式
			disableDefaultUI: true
		});
		
		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);

		mapObj.on("click", function(evt) { // 地图全局事件
			mapObj.setCenter(new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)))
		})
	}

	export default {
		data() {
			return {
				key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77',
				iconItem: [{ // 模拟数据
					name: 'agriculture',
					src: require("@/static/dot-01.png"),
					position: [22.227959, 113.459589],
					markerUrl: require("@/static/dot-01.png"), // 标点图片样式
				}, {
					name: 'property',
					src: require("@/static/dot-02.png"),
					position: [22.253496, 113.477076],
					markerUrl: require("@/static/dot-02.png"), // 标点图片样式
				}, {
					name: 'construction',
					src: require("@/static/dot-03.png"),
					position: [22.237834, 113.463987],
					markerUrl: require("@/static/dot-03.png"), // 标点图片样式
				}, {
					name: 'noRented',
					src: require("@/static/dot-04.png"),
					position: [22.253692, 113.498333],
					markerUrl: require("@/static/dot-04.png"), // 标点图片样式
				}]
			}
		},
		onLoad() {
			// #ifdef H5
			this.loadScrpit();
			// #endif

			let time = setInterval(() => { // 等待地图挂载
				if (mapObj != null) {
					clearInterval(time);
					this.setIcon(); // 挂载坐标图片信息
				}
			}, 100)
		},
		methods: {
			// 初始化
			loadScrpit() { // 挂载js
				var script = document.createElement('script');
				script.src =
					`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
				document.body.appendChild(script);
			},
			setBounds() {
				bounds = new TMap.LatLngBounds();
			
				this.iconItem.forEach(item => {
					console.log('item==========', item);
					//若坐标点不在范围内，扩大bounds范围
					if (bounds.isEmpty() || !bounds.contains(new TMap.LatLng(item.position[0], item
							.position[1]))) {
						bounds.extend(new TMap.LatLng(item.position[0], item.position[1]));
					}
				})
			
				//调用fitBounds自动调整地图显示范围
				mapObj.fitBounds(bounds, {
					padding: {
						top: 200,
						bottom: 200,
						left: 200,
						right: 200
					},
				});
			},
			setIcon() { // 创建标点图标
				let that = this;
				// 创建 AMap.Icon 实例
				agriculture = new TMap.MarkerStyle({
					"width": 75, // 定义宽，单位：PX
					"height": 90, // 定义高，单位：PX
					"src": that.iconItem[0].markerUrl, // 标点图片链接：本地图片
				})
				property = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[1].markerUrl,
				})
				construction = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[2].markerUrl,
				})
				noRented = new TMap.MarkerStyle({
					"width": 75,
					"height": 90,
					"src": that.iconItem[3].markerUrl,
				})
				this.setMapMarker(); // 调用创建标点
			},
			setMapMarker() { // 创建标点实例
				let geometries = [];

				for (let i = 0; i < this.iconItem.length; i++) {
					let obj = { // 点标记数据
						"id": i, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						"styleId": this.iconItem[i].name, // 对应标点实例的style的名称
						"position": new TMap.LatLng(this.iconItem[i].position[0], this.iconItem[i].position[1]), // 标点的坐标
						"properties": { // 自定义属性
							"title": this.iconItem[i].name
						}
					}
					geometries.push(obj);
				}

				marker = new TMap.MultiMarker({ // 构造函数创建标点实例
					id: 'marker-layer', // 定义的ID名称
					map: mapObj, // 挂载的地图实例
					styles: { // 加入标点的样式
						"agriculture": agriculture,
						"property": property,
						"construction": construction,
						"noRented": noRented,
					},
					geometries: geometries // 点标记数据数组
				});
				
				this.setBounds()
			},
		}
	}
</script>

<style>
	.content {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.wrapperBox {
		position: relative;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}

	#wrapper {
		z-index: 20;
		width: 120vw;
		height: 120vh;
		top: -10vh;
		left: -10vw;
		position: absolute;
	}
</style>